<template>
  <div class="echarts-inner"/>
</template>

<script>
  import echarts from 'echarts'
  import theme from '@/utils/echartsTheme'

  require('echarts/theme/macarons') // echarts theme
  import { debounce } from '@/utils'

  export default {
    props: {
      autoResize: {
        type: Boolean,
        default: true
      },
      echartsData: {
        type: Object
      }
    },
    data() {
      return {
        chart: echarts
      }
    },
    mounted() {
      this.setOptions(this.echartsData)
      if (this.autoResize) {
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
      }
      // 监听侧边栏的变化
      this.sidebarElm = document.getElementsByClassName('pageNav')[0]
      this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
        window.removeEventListener('resize', this.__resizeHandler)
      }
      this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      this.chart.dispose()
      this.chart = null

    },
    methods: {
      sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.__resizeHandler()
        }
      },
      setOptions(echartsData = {}) {
        this.chart = echarts.init(this.$el, 'macarons')

        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:[ '商业','居民','工业','微信','支付宝','现金','银行'],
            textStyle:{
              color: '#fff'
            }
          },
          series: [
            {
              name:'售水量',
              type:'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                normal: {
                  position: 'inner'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {value:240642.77, name:'商业'},
                {value:191093.24, name:'居民'},
                {value:488574.94, name:'工业'}
              ]
            },
            {
              name:'售水量',
              type:'pie',
              radius: ['40%', '55%'],
              label: {
                normal: {
                  formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                  backgroundColor: 'rgba(0,0,0,.6)',
                  borderRadius: 4,
                  rich: {
                    a: {
                      lineHeight: 22,
                      align: 'center'
                    },
                    b: {
                      fontSize: 16,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [2, 4],
                      borderRadius: 2
                    }
                  }
                }
              },
              data:[
                {value:49734.07, name:'微信'},
                {value:46781.4, name:'支付宝'},
                {value:23344.56, name:'银行'},
                {value:120782.74, name:'现金'},
                {value:60437.51, name:'微信'},
                {value:49272.71, name:'支付宝'},
                {value:24913.17, name:'银行'},
                {value:56469.85, name:'现金'},
                {value:84612.51, name:'微信'},
                {value:80644.85, name:'支付宝'},
                {value:82490.27, name:'银行'},
                {value:240827.31, name:'现金'}
              ]
            }
          ]
        })
      }
    }
  }
</script>
<style scoped>
.echarts-inner{
  height: 100%;
}

</style>
